<template>
  <div class="Monitor">
    <div class="content_top">
      <!-- <p  @click="Monitor_Detail(2,3,3,4)">跳转测试</p> -->
      <div class="abnormal">
        <div
          class="situation completed"
          style="background: rgba(0, 122, 245, 0.1)"
          @click="Monitor_Detail(2)"
        >
          <span class="type" style="color: #007af5">当前处理</span>
          <span class="typeNum" style="color: #007af5">{{ openCount ? openCount : '0' }}</span>
        </div>
        <div
          class="situation completed"
          style="background: rgba(104, 212, 178, 0.1)"
          @click="Monitor_Detail(1)"
        >
          <span class="type" style="color: #68d4b2">今日创建</span>
          <span class="typeNum" style="color: #68d4b2">{{ allCount ? allCount : '0' }}</span>
        </div>
        <div
          class="situation"
          style="background: rgba(170, 95, 255, 0.1)"
          @click="Monitor_Detail(3)"
        >
          <span class="type" style="color: #aa5fff">待手工分派</span>
          <span class="typeNum" style="color: #aa5fff">{{
            noCentreCount ? noCentreCount : '0'
          }}</span>
        </div>
      </div>
      <div class="pir_swiper">
        <!-- <div class="take_timeout">
          <div id="timeoutNot_takenOver"> </div>
          <ul>
            <li
              v-for="(item, index) of not_takenlist"
              :key="index"
              @click="Monitor_Detail(4, takenOver_lever, item.orgName)"
            >
              <span class="list_title"> {{ item.orgName }}</span>
              <span class="list_num">{{ item.counts }}</span>
            </li>
            <div style="clear: both"></div>
          </ul>
        </div>
        <div class="Update_timeout">
          <div id="timeoutNot_updated"></div>
          <ul>
            <li
              v-for="(item, index) of Not_updated"
              :key="index"
              @click="Monitor_Detail(5, updated_lever, item.orgName)"
            >
              <span class="list_title"> {{ item.orgName }}</span>
              <span class="list_num">{{ item.counts }}</span>
            </li>
            <div style="clear: both"></div>
          </ul>
        </div>
        <div class="Update_timeout">
          <div id="task_Backlog"> </div>
          <ul>
            <li
              v-for="(item, index) of Task_backlogList"
              :key="index"
              @click="Monitor_Detail(6, task_lever, item.orgName)"
            >
              <span class="list_title"> {{ item.orgName }}</span>
              <span class="list_num">{{ item.allCount }}</span>
            </li>
            <div style="clear: both"></div>
          </ul>
        </div> -->
        <swiper
          :slides-per-view="3"
          :slides-per-group="3"
          :space-between="10"
          :modules="modules"
          :pagination="{ clickable: true }"
          :touchStartPreventDefault="false"
        >
          <!-- :autoplay="{
            delay: 3000, // 自动播放的间隔时间，单位ms，默认3000ms
            disableOnInteraction: false
          }" -->
          <swiper-slide>
            <div class="take_timeout">
              <div id="timeoutNot_takenOver">
                <!-- @click="Monitor_Detail(4)" -->
              </div>
              <el-scrollbar>
                <ul>
                  <li
                    v-for="(item, index) of not_takenlist"
                    :key="index"
                    @click="Monitor_Detail(4, takenOver_lever, item.orgName)"
                  >
                    <span class="list_title"> {{ item.orgName }}</span>
                    <span class="list_num">{{ item.counts }}</span>
                  </li>
                  <div style="clear: both"></div>
                </ul>
              </el-scrollbar>
            </div>
          </swiper-slide>
          <swiper-slide>
            <div class="Update_timeout">
              <div id="timeoutNot_updated"></div>
              <el-scrollbar>
                <ul>
                  <li
                    v-for="(item, index) of Not_updated"
                    :key="index"
                    @click="Monitor_Detail(5, updated_lever, item.orgName)"
                  >
                    <span class="list_title"> {{ item.orgName }}</span>
                    <span class="list_num">{{ item.counts }}</span>
                  </li>
                  <div style="clear: both"></div>
                </ul>
              </el-scrollbar>
            </div>
          </swiper-slide>
          <swiper-slide>
            <div class="Update_timeout">
              <div id="unsolved"> </div>
              <el-scrollbar>
                <ul>
                  <li
                    v-for="(item, index) of NotSolve_list"
                    :key="index"
                    @click="Monitor_Detail(8, solved, item.orgName)"
                  >
                    <span class="list_title"> {{ item.orgName }}</span>
                    <span class="list_num">{{ item.allCount }}</span>
                  </li>
                  <div style="clear: both"></div>
                </ul>
              </el-scrollbar>
            </div>
          </swiper-slide>
          <swiper-slide>
            <div class="Update_timeout">
              <div id="task_Backlog"> </div>
              <el-scrollbar>
                <ul>
                  <li
                    v-for="(item, index) of Task_backlogList"
                    :key="index"
                    @click="Monitor_Detail(6, task_lever, item.orgName)"
                  >
                    <span class="list_title"> {{ item.orgName }}</span>
                    <span class="list_num">{{ item.allCount }}</span>
                  </li>
                  <div style="clear: both"></div>
                </ul>
              </el-scrollbar>
            </div>
          </swiper-slide>
          <swiper-slide>
            <div class="Update_timeout">
              <div id="shut"> </div>
              <el-scrollbar>
                <ul>
                  <li
                    v-for="(item, index) of shutList"
                    :key="index"
                    @click="Monitor_Detail(7, close, item.orgName)"
                  >
                    <span class="list_title"> {{ item.orgName }}</span>
                    <span class="list_num">{{ item.allCount }}</span>
                  </li>
                  <div style="clear: both"></div>
                </ul>
              </el-scrollbar>
            </div>
          </swiper-slide>
          <swiper-slide v-if="false">
            <div class="Update_timeout">
              <div id="influence"> </div>
              <el-scrollbar>
                <ul>
                  <li v-for="(item, index) of influenceList" :key="index">
                    <span class="list_title"> {{ item.orgName }}</span>
                    <span class="list_num">{{ item.allCount }}</span>
                  </li>
                  <div style="clear: both"></div>
                </ul>
              </el-scrollbar>
            </div>
          </swiper-slide>
          <swiper-slide> </swiper-slide>
        </swiper>
      </div>
    </div>
    <div class="content_bottom">
      <div class="Trend_block">
        <p class="title">增量同比趋势图</p>
        <div class="text-sm">
          <el-radio-group v-model="radio1" class="ml-4" @change="Trend_changeLevel">
            <el-radio label="" size="small">总量</el-radio>
            <el-radio label="3" size="small">红</el-radio>
            <el-radio label="2" size="small">橙</el-radio>
            <el-radio label="1" size="small">黄</el-radio>
          </el-radio-group>
          <el-radio-group v-model="Date_latitude" class="ml-4" @change="date_changeLevel">
            <el-radio label="day" size="small">日</el-radio>
            <el-radio label="week" size="small">周</el-radio>
            <el-radio label="months" size="small">月</el-radio>
          </el-radio-group>
          <el-tree-select
            v-model="value"
            :data="data"
            :render-after-expand="false"
            default-expand-all
            @node-click="handleNodeClick"
          />
        </div>
        <div id="the_total"></div>
      </div>
      <div class="system_block">
        <p class="title">TOP10热点系统图</p>
        <div class="text-sm">
          <el-radio-group v-model="hot_radio" class="ml-4" @change="hot_changeLevel">
            <el-radio label="0" size="small">总量</el-radio>
            <el-radio label="3" size="small">红</el-radio>
            <el-radio label="2" size="small">橙</el-radio>
            <el-radio label="1" size="small">黄</el-radio>
          </el-radio-group>
          <el-radio-group v-model="hot_Date_latitude" class="ml-4" @change="hot_date_changeLevel">
            <el-radio label="day" size="small">日</el-radio>
            <el-radio label="week" size="small">周</el-radio>
            <el-radio label="months" size="small">月</el-radio>
          </el-radio-group>
          <el-tree-select
            v-model="hot_value"
            :data="hot_data"
            :render-after-expand="false"
            default-expand-all
            @node-click="handleDateClick"
          />
        </div>
        <div id="Hotspot_systemDiagram" v-show="!hot_image"></div>
        <div class="context" v-if="hot_image">
          <el-empty description="暂无数据" />
        </div>
      </div>
    </div>
    <el-dialog v-model="dialogVisible" title="监控事件单-任务积压" width="60%">
      <TaskBackiog @handle-close="handleTaskBackiog" :type="props.type"></TaskBackiog>
    </el-dialog>
    <el-dialog v-model="unresolverVisible" title="监控事件单-长时未解决" width="60%">
      <Unresolved @handle-close="handleSolved" :type="props.type"></Unresolved>
    </el-dialog>
    <el-dialog v-model="closeVisible" title="监控事件单-强制关闭" width="60%">
      <ForceOff @handle-close="handleClose" :type="props.type"></ForceOff>
    </el-dialog>
  </div>
</template>
<script setup lang="ts">
  import { ElMessage } from 'element-plus';
  import TaskBackiog from '@/components/PopupWindow/Task_backlog.vue';
  import Unresolved from '@/components/PopupWindow/Unresolve_longTime.vue';
  import ForceOff from '@/components/PopupWindow/Force_off.vue';
  import {
    watch,
    onMounted,
    ref,
    getCurrentInstance,
    markRaw,
    reactive,
    onBeforeUnmount
  } from 'vue';
  import { useRouter } from 'vue-router';
  import {
    eventCountNum,
    eventTakeLevelCount,
    eventTakeDeptCount,
    eventUpdateLevelCount,
    eventUpdateDeptCount,
    eventStockLevelCount,
    eventStockTaskList,
    compareCount,
    sysCount,
    eventNotSolveLevelCount,
    eventSolveTaskList,
    eventCloseLevelCount,
    eventCloseTaskList
  } from '@/http/api1';
  //   import { useStore } from 'vuex';
  //   const store = useStore();
  const router = useRouter();
  import { A11y, Autoplay, Pagination } from 'swiper';
  import { Swiper, SwiperSlide } from 'swiper/vue';
  import 'swiper/less';
  import 'swiper/less/navigation';
  import 'swiper/less/pagination';
  const { proxy } = getCurrentInstance() as any;
  let modules = [Pagination, Autoplay, A11y];
  const props = defineProps({
    //是否为预览模式
    changeTime: {
      type: Number,
      default: 0
    },
    type: {
      type: String,
      default: ''
    }
  });
  const radio1 = ref('');
  const hot_radio = ref('0');
  const Date_latitude = ref('day');
  const hot_Date_latitude = ref('day');
  const value = ref('按中心维度');
  const hot_value = ref('所有业务系统');
  const takenOver_lever = ref(''); // 超时未接受事件等级
  const updated_lever = ref(''); // 超时未更新事件等级
  const task_lever = ref(''); // 任务积压
  const solved = ref(''); // 长时未解决事件等级
  const close = ref(''); // 强制关闭事件等级
  const hot_image = ref(false);
  const the_total = ref<HTMLElement>();
  const Hotspot_systemDiagram = ref<HTMLElement>();
  const timeoutNot_takenOver = ref<HTMLElement>();
  const timeoutNot_updated = ref<HTMLElement>();
  const task_Backlog = ref<HTMLElement>();
  const unsolved = ref<HTMLElement>();
  const hard_close = ref<HTMLElement>();
  // const influence = ref<HTMLElement>();
  const data = [
    {
      value: '1',
      label: '按中心维度'
    },
    {
      value: '2',
      label: '按条线维度'
    },
    {
      value: '',
      label: '按处室维度',
      children: [
        {
          value: '3',
          label: '应用各处'
        },
        {
          value: '4',
          label: '系统各处'
        },
        {
          value: '5',
          label: '网络各处'
        }
        // {
        //   value: '3-4',
        //   label: '动力各处'
        // }
      ]
    }
  ];
  const hot_data = [
    {
      value: '',
      label: '所有业务系统'
    },
    {
      value: '1',
      label: '重要信息系统'
    }
  ];
  const dialogVisible = ref(false);
  const unresolverVisible = ref(false);
  const closeVisible = ref(false);
  const noCentreCount = ref('');
  const allCount = ref('');
  const openCount = ref('');
  const not_takenlist = reactive([]); // 超时未接手列表
  const Not_updated = reactive([]); // 超时未更新列表
  const Task_backlogList = reactive([]); // 任务积压列表
  const NotSolve_list = reactive([]); // 长时未解决
  const shutList = reactive([]); // 强制关闭列表
  const influenceList = reactive([]); // 判断有影响列表
  const groupType = ref('1'); // 折线图下拉框选项value
  const dataType = ref(''); // 折线图下拉框选项value
  onMounted(() => {
    getEventCount();
    eventTake_LevelCount();
    eventTake_DeptCount('');
    eventUpdate_LevelCount();
    eventUpdate_DeptCount('');
    eventStock_LevelCount();
    eventStock_TaskList('');
    NotSolveLevel();
    SolveTaskList('');
    eventClose_LevelCount();
    eventClose_TaskList('');
    compareCount_list();
    Hotspot_sys();
    pirBoxPend();
    updated();
    Backlog();
    longTime_unsolved();
    Forced();
    // affect();
  });
  /* （总数、当前处理、无所属中心） */
  const getEventCount = () => {
    eventCountNum({ typeCount: props.type }).then((res) => {
      if ((res as any).data.code !== 0) {
        ElMessage({
          message: (res as any).data.msg,
          type: 'error'
        });
        return;
      }
      noCentreCount.value = res.data.data.noCentreCount;
      allCount.value = res.data.data.allCount;
      openCount.value = res.data.data.openCount;
    });
  };
  /* 超时未接手（根据等级） */
  const eventTake_LevelCount = () => {
    eventTakeLevelCount({ typeCount: props.type }).then((res) => {
      if ((res as any).data.code !== 0) {
        ElMessage({
          message: (res as any).data.msg,
          type: 'error'
        });
        return;
      }
      pirBoxPend(res.data.data);
    });
  };
  /* 超时未接手（根据等级查询处室列表） */
  const eventTake_DeptCount = (typeNum: string) => {
    eventTakeDeptCount({
      eventLevel: typeNum,
      typeCount: props.type
    }).then((res) => {
      if ((res as any).data.code !== 0) {
        ElMessage({
          message: (res as any).data.msg,
          type: 'error'
        });
        return;
      }
      not_takenlist.length = 0;
      not_takenlist.push(...res.data.data.eventDedptCount);
    });
  };
  /* 超时未更新（根据等级） */
  const eventUpdate_LevelCount = () => {
    eventUpdateLevelCount({ typeCount: props.type }).then((res) => {
      if ((res as any).data.code !== 0) {
        ElMessage({
          message: (res as any).data.msg,
          type: 'error'
        });
        return;
      }
      updated(res.data.data);
    });
  };
  /* 超时未更新（根据等级查询处室列表） */
  const eventUpdate_DeptCount = (typeNum: string) => {
    eventUpdateDeptCount({
      eventLevel: typeNum,
      typeCount: props.type
    }).then((res) => {
      if ((res as any).data.code !== 0) {
        ElMessage({
          message: (res as any).data.msg,
          type: 'error'
        });
        return;
      }
      Not_updated.length = 0;
      Not_updated.push(...res.data.data.eventDeptCount);
    });
  };
  /* 任务积压（根据等级） */
  const eventStock_LevelCount = () => {
    eventStockLevelCount({
      typeCount: props.type
    }).then((res) => {
      if ((res as any).data.code !== 0) {
        ElMessage({
          message: (res as any).data.msg,
          type: 'error'
        });
        return;
      }
      Backlog(res.data.data);
    });
  };
  /* 任务积压（根据等级查询处室列表） */
  const eventStock_TaskList = (typeNum: string) => {
    eventStockTaskList({
      eventLevel: typeNum,
      handlePerson: '',
      orgName: '',
      pageNum: '1',
      pageSize: '100',
      typeCount: props.type
    }).then((res) => {
      if ((res as any).data.code !== 0) {
        ElMessage({
          message: (res as any).data.msg,
          type: 'error'
        });
        return;
      }
      Task_backlogList.length = 0;
      Task_backlogList.push(...res.data.data.rows);
    });
  };
  /* 长时未解决（根据等级） */
  const NotSolveLevel = () => {
    eventNotSolveLevelCount({
      typeCount: props.type
    }).then((res) => {
      if ((res as any).data.code !== 0) {
        ElMessage({
          message: (res as any).data.msg,
          type: 'error'
        });
        return;
      }
      longTime_unsolved(res.data.data);
    });
  };
  /* 长时未解决（根据等级查询处室列表） */
  const SolveTaskList = (typeNum: string) => {
    eventSolveTaskList({
      eventLevel: typeNum,
      handlePerson: '',
      orgName: '',
      pageNum: '1',
      pageSize: '100',
      typeCount: props.type
    }).then((res) => {
      // console.log(res);
      if ((res as any).data.code !== 0) {
        ElMessage({
          message: (res as any).data.msg,
          type: 'error'
        });
        return;
      }
      NotSolve_list.length = 0;
      NotSolve_list.push(...res.data.data.rows);
    });
  };
  /* 强制关闭（根据等级） */
  const eventClose_LevelCount = () => {
    eventCloseLevelCount({
      typeCount: props.type
    }).then((res) => {
      if ((res as any).data.code !== 0) {
        ElMessage({
          message: (res as any).data.msg,
          type: 'error'
        });
        return;
      }
      Forced(res.data.data);
    });
  };
  /* 强制关闭（根据等级查询处室列表） */
  const eventClose_TaskList = (typeNum: string) => {
    eventCloseTaskList({
      eventLevel: typeNum,
      handlePerson: '',
      orgName: '',
      pageNum: '1',
      pageSize: '100',
      typeCount: props.type
    }).then((res) => {
      if ((res as any).data.code !== 0) {
        ElMessage({
          message: (res as any).data.msg,
          type: 'error'
        });
        return;
      }
      shutList.length = 0;
      shutList.push(...res.data.data.rows);
    });
  };
  /* 折线图 */
  const compareCount_list = () => {
    compareCount({
      eventLevel: radio1.value,
      dateTime: Date_latitude.value,
      groupType: groupType.value,
      typeCount: props.type
    })
      .then((res) => {
        if ((res as any).data.code !== 0) {
          ElMessage({
            message: (res as any).data.msg,
            type: 'error'
          });
          return;
        }
        the_total_list(res.data.data);
      })
      .catch((error) => {
        console.log(error);
      });
  };
  /* 柱状图 */
  const Hotspot_sys = () => {
    sysCount({
      eventLevel: hot_radio.value,
      type: hot_Date_latitude.value,
      sysType: dataType.value,
      typeCount: props.type
    }).then((res) => {
      if ((res as any).data.code !== 0) {
        ElMessage({
          message: (res as any).data.msg,
          type: 'error'
        });
        return;
      }
      if (Object.keys(res.data.data).length == 0) {
        hot_image.value = true;
        Hotspot_systemDiagram.value = '';
      } else {
        hot_image.value = false;
        // const arr = Object.entries(res.data.data);
        hotSpot_list(res.data.data);
      }
    });
  };
  const handleTaskBackiog = () => {
    dialogVisible.value = false;
  };
  const handleSolved = () => {
    unresolverVisible.value = false;
  };
  const handleClose = () => {
    closeVisible.value = false;
  };
  const pirBoxPend = (data: string) => {
    if (
      timeoutNot_takenOver.value != null &&
      timeoutNot_takenOver.value != '' &&
      timeoutNot_takenOver.value != undefined
    ) {
      timeoutNot_takenOver.value.dispose();
    }
    timeoutNot_takenOver.value = proxy.$ECharts.init(
      document.getElementById('timeoutNot_takenOver')
    );
    let option;
    let { count, eventLevelCount } = data ? data : 0;
    // const ary = ref(Number(unclaimed) + Number(processing) + Number(toCmsj) + Number(transferDeal));
    let Yellow_grade = ref('');
    let red_grade = ref('');
    let Orange_grade = ref('');
    if (eventLevelCount) {
      eventLevelCount.forEach((item) => {
        switch (item.eventLevel) {
          case '1':
            Yellow_grade.value = item;
            break;
          case '2':
            Orange_grade.value = item;
            break;
          case '3':
            red_grade.value = item;
            break;
          default:
            break;
        }
      });
    }

    option = {
      grid: {
        top: '0',
        bottom: '0',
        backgroundColor: '#fff'
      },
      tooltip: {
        trigger: 'item',
        position: [100, 0]
      },
      series: [
        {
          // name: '超时未接手',
          type: 'pie',
          cursor: 'pointer',
          radius: [0, '80%'],
          label: {
            position: 'center',
            formatter: '{c}\n{b|超时未接手}',
            color: '#46545D ',
            fontSize: 18,
            fontWeight: 'bold',
            lineHeight: '28',
            rich: {
              // c: {
              //     fontSize: 20,
              //     fontWeight: "bold",
              //     color: "#46545D ",
              //     lineHeight: "28",
              // },
              b: {
                fontSize: 12,
                fontWeight: '400',
                color: ' #46545D',
                lineHeight: '16'
              }
            }
          },
          labelLine: {
            show: false
          },
          emphasis: {
            disabled: true
          },
          avoidLabelOverlap: false,
          data: [
            {
              value: count ? count : 0,
              // value: 100,
              name: '超时未接手',
              itemStyle: {
                color: '#fff'
              },
              label: {
                show: true
              }
            }
          ]
        },
        {
          name: '超时未接手',
          // silent: false,
          // lengendHoverLink: false,
          // animation: false,
          type: 'pie',
          cursor: 'pointer',
          radius: ['80%', '100%'],
          labelLine: {
            show: false
          },
          emphasis: {
            disabled: true
          },
          avoidLabelOverlap: false,
          data: [
            {
              value: red_grade.value.counts ? red_grade.value.counts : 0,
              // value: 20,
              name: '红色警告',
              itemStyle: {
                color: '#FF0000'
              }
            },
            {
              value: Yellow_grade.value.counts ? Yellow_grade.value.counts : 0,
              // value: 20,
              name: '黄色警告',
              itemStyle: {
                color: '#FFFF00'
              }
            },
            {
              value: Orange_grade.value.counts ? Orange_grade.value.counts : 0,
              // value: 20,
              name: '橙色警告',
              itemStyle: {
                color: '#ED702D'
              }
            }
          ]
        }
      ]
    };
    option && timeoutNot_takenOver.value.setOption(option);
    timeoutNot_takenOver.value.on('click', (params) => {
      switch (params.name) {
        case '超时未接手':
          Monitor_Detail(4, '');
          break;
        case '黄色警告':
          takenOver_lever.value = '1';
          eventTake_DeptCount('1');
          break;
        case '橙色警告':
          takenOver_lever.value = '2';
          eventTake_DeptCount('2');
          break;
        case '红色警告':
          takenOver_lever.value = '3';
          eventTake_DeptCount('3');
          break;

        default:
          break;
      }
    });
  };
  const updated = (data: string) => {
    if (
      timeoutNot_updated.value != null &&
      timeoutNot_updated.value != '' &&
      timeoutNot_updated.value != undefined
    ) {
      timeoutNot_updated.value.dispose();
    }
    timeoutNot_updated.value = proxy.$ECharts.init(document.getElementById('timeoutNot_updated'));
    let option;
    let { count, eventLevelCount } = data ? data : 0;
    // const ary = ref(Number(unclaimed) + Number(processing) + Number(toCmsj) + Number(transferDeal));
    let Yellow_grade1 = ref('');
    let red_grade1 = ref('');
    let Orange_grade1 = ref('');
    if (eventLevelCount) {
      eventLevelCount.forEach((item) => {
        switch (item.eventLevel) {
          case '1':
            Yellow_grade1.value = item;
            break;
          case '2':
            Orange_grade1.value = item;
            break;
          case '3':
            red_grade1.value = item;
            break;
          default:
            break;
        }
      });
    }
    option = {
      grid: {
        top: '0',
        bottom: '0',
        backgroundColor: '#fff'
      },
      tooltip: {
        trigger: 'item',
        position: [100, 0]
      },
      series: [
        {
          // name: '超时未更新',
          type: 'pie',
          cursor: 'pointer',
          radius: [0, '80%'],
          label: {
            position: 'center',
            formatter: '{c}\n{b|超时未更新}',
            color: '#46545D ',
            fontSize: 20,
            fontWeight: 'bold',
            lineHeight: '28',
            rich: {
              b: {
                fontSize: 12,
                fontWeight: '400',
                color: ' #46545D',
                lineHeight: '16'
              }
            }
          },
          labelLine: {
            show: false
          },
          emphasis: {
            disabled: true
          },
          data: [
            {
              value: count ? count : 0,
              // value: 100,
              name: '超时未更新',
              itemStyle: {
                color: '#fff'
              },
              label: {
                show: true
              }
            }
          ]
        },
        {
          name: '超时未更新',
          // silent: false,
          // lengendHoverLink: false,
          // animation: false,
          type: 'pie',
          cursor: 'pointer',
          radius: ['80%', '100%'],
          labelLine: {
            show: false
          },
          emphasis: {
            disabled: true
          },
          avoidLabelOverlap: false,
          data: [
            {
              value: red_grade1.value.counts ? red_grade1.value.counts : 0,
              // value: 20,
              name: '红色警告',
              itemStyle: {
                color: '#FF0000'
              }
            },
            {
              value: Yellow_grade1.value.counts ? Yellow_grade1.value.counts : 0,
              // value: 20,
              name: '黄色警告',
              itemStyle: {
                color: '#FFFF00'
              }
            },
            {
              value: Orange_grade1.value.counts ? Orange_grade1.value.counts : 0,
              // value: 20,
              name: '橙色警告',
              itemStyle: {
                color: '#ED702D'
              }
            }
          ]
        }
      ]
    };

    option && timeoutNot_updated.value.setOption(option);
    timeoutNot_updated.value.on('click', (params) => {
      switch (params.name) {
        case '超时未更新':
          Monitor_Detail(5, '');
          break;
        case '黄色警告':
          updated_lever.value = '1';
          eventUpdate_DeptCount('1');
          break;
        case '橙色警告':
          updated_lever.value = '2';
          eventUpdate_DeptCount('2');
          break;
        case '红色警告':
          updated_lever.value = '3';
          eventUpdate_DeptCount('3');
          break;

        default:
          break;
      }
    });
  };
  const Backlog = (data: string) => {
    if (task_Backlog.value != null && task_Backlog.value != '' && task_Backlog.value != undefined) {
      task_Backlog.value.dispose();
    }
    task_Backlog.value = proxy.$ECharts.init(document.getElementById('task_Backlog'));
    let option;
    // let { unclaimed, processing, toCmsj, transferDeal } = operList.value ? operList.value : 0;
    // const ary = ref(Number(unclaimed) + Number(processing) + Number(toCmsj) + Number(transferDeal));
    let { count, eventLevelCount } = data ? data : 0;
    // const ary = ref(Number(unclaimed) + Number(processing) + Number(toCmsj) + Number(transferDeal));
    let Yellow_grade = ref('');
    let red_grade = ref('');
    let Orange_grade = ref('');
    if (eventLevelCount) {
      eventLevelCount.forEach((item) => {
        switch (item.eventLevel) {
          case '1':
            Yellow_grade.value = item;
            break;
          case '2':
            Orange_grade.value = item;
            break;
          case '3':
            red_grade.value = item;
            break;
          default:
            break;
        }
      });
    }
    option = {
      grid: {
        top: '0',
        bottom: '0',
        backgroundColor: '#fff'
      },
      tooltip: {
        trigger: 'item',
        position: [100, 0]
      },
      series: [
        {
          // name: '任务积压',
          type: 'pie',
          cursor: 'pointer',
          radius: [0, '80%'],
          label: {
            position: 'center',
            formatter: '{c}\n{b|任务积压}',
            color: '#46545D ',
            fontSize: 20,
            fontWeight: 'bold',
            lineHeight: '28',
            rich: {
              b: {
                fontSize: 12,
                fontWeight: '400',
                color: ' #46545D',
                lineHeight: '16'
              }
            }
          },
          labelLine: {
            show: false
          },
          emphasis: {
            disabled: true
          },
          data: [
            {
              value: count ? count : 0,
              // value: 100,
              name: '任务积压',
              itemStyle: {
                color: '#fff'
              },
              label: {
                show: true
              }
            }
          ]
        },
        {
          name: '任务积压',
          type: 'pie',
          cursor: 'pointer',
          radius: ['80%', '100%'],
          labelLine: {
            show: false
          },
          emphasis: {
            disabled: true
          },
          avoidLabelOverlap: false,
          data: [
            {
              value: red_grade.value.counts ? red_grade.value.counts : 0,
              // value: 20,
              name: '红色警告',
              itemStyle: {
                color: '#FF0000'
              }
            },
            {
              value: Yellow_grade.value.counts ? Yellow_grade.value.counts : 0,
              // value: 20,
              name: '黄色警告',
              itemStyle: {
                color: '#FFFF00'
              }
            },
            {
              value: Orange_grade.value.counts ? Orange_grade.value.counts : 0,
              // value: 20,
              name: '橙色警告',
              itemStyle: {
                color: '#ED702D'
              }
            }
          ]
        }
      ]
    };

    option && task_Backlog.value.setOption(option);
    task_Backlog.value.on('click', (params) => {
      switch (params.name) {
        case '任务积压':
          dialogVisible.value = true;
          break;
        case '黄色警告':
          task_lever.value = '1';
          eventStock_TaskList('1');
          break;
        case '橙色警告':
          task_lever.value = '2';
          eventStock_TaskList('2');
          break;
        case '红色警告':
          task_lever.value = '3';
          eventStock_TaskList('3');
          break;

        default:
          break;
      }
    });
  };
  const longTime_unsolved = (data: string) => {
    if (unsolved.value != null && unsolved.value != '' && unsolved.value != undefined) {
      unsolved.value.dispose();
    }
    unsolved.value = proxy.$ECharts.init(document.getElementById('unsolved'));
    let option;
    let { count, eventLevelCount } = data ? data : 0;
    // const ary = ref(Number(unclaimed) + Number(processing) + Number(toCmsj) + Number(transferDeal));
    let Yellow_grade = ref('');
    let red_grade = ref('');
    let Orange_grade = ref('');
    if (eventLevelCount) {
      eventLevelCount.forEach((item) => {
        switch (item.eventLevel) {
          case '1':
            Yellow_grade.value = item;
            break;
          case '2':
            Orange_grade.value = item;
            break;
          case '3':
            red_grade.value = item;
            break;
          default:
            break;
        }
      });
    }
    option = {
      grid: {
        top: '0',
        bottom: '0',
        backgroundColor: '#fff'
      },
      tooltip: {
        trigger: 'item',
        position: [100, 0]
      },
      series: [
        {
          type: 'pie',
          cursor: 'pointer',
          radius: [0, '80%'],
          label: {
            position: 'center',
            formatter: '{c}\n{b|长时未解决}',
            color: '#46545D ',
            fontSize: 20,
            fontWeight: 'bold',
            lineHeight: '28',
            rich: {
              b: {
                fontSize: 12,
                fontWeight: '400',
                color: ' #46545D',
                lineHeight: '16'
              }
            }
          },
          labelLine: {
            show: false
          },
          emphasis: {
            disabled: true
          },
          data: [
            {
              value: count ? count : 0,
              // value: 100,
              name: '长时未解决',
              itemStyle: {
                color: '#fff'
              },
              label: {
                show: true
              }
            }
          ]
        },
        {
          name: '长时未解决',
          type: 'pie',
          cursor: 'pointer',
          radius: ['80%', '100%'],
          labelLine: {
            show: false
          },
          emphasis: {
            disabled: true
          },
          avoidLabelOverlap: false,
          data: [
            {
              value: red_grade.value.counts ? red_grade.value.counts : 0,
              // value: 20,
              name: '红色警告',
              itemStyle: {
                color: '#FF0000'
              }
            },
            {
              value: Yellow_grade.value.counts ? Yellow_grade.value.counts : 0,
              // value: 20,
              name: '黄色警告',
              itemStyle: {
                color: '#FFFF00'
              }
            },
            {
              value: Orange_grade.value.counts ? Orange_grade.value.counts : 0,
              // value: 20,
              name: '橙色警告',
              itemStyle: {
                color: '#ED702D'
              }
            }
          ]
        }
      ]
    };

    option && unsolved.value.setOption(option);
    unsolved.value.on('click', (params) => {
      // unresolverVisible.value = true;
      switch (params.name) {
        case '长时未解决':
          Monitor_Detail(8, '', '');
          // unresolverVisible.value = true;
          break;
        case '黄色警告':
          solved.value = '1';
          SolveTaskList('1');
          break;
        case '橙色警告':
          solved.value = '2';
          SolveTaskList('2');
          break;
        case '红色警告':
          solved.value = '3';
          SolveTaskList('3');
          break;
        default:
          break;
      }
    });
  };
  const Forced = (data: string) => {
    if (hard_close.value != null && hard_close.value != '' && hard_close.value != undefined) {
      hard_close.value.dispose();
    }
    hard_close.value = proxy.$ECharts.init(document.getElementById('shut'));
    let option;
    let { count, eventLevelCount } = data ? data : 0;
    // const ary = ref(Number(unclaimed) + Number(processing) + Number(toCmsj) + Number(transferDeal));
    let Yellow_grade = ref('');
    let red_grade = ref('');
    let Orange_grade = ref('');
    if (eventLevelCount) {
      eventLevelCount.forEach((item) => {
        switch (item.eventLevel) {
          case '1':
            Yellow_grade.value = item;
            break;
          case '2':
            Orange_grade.value = item;
            break;
          case '3':
            red_grade.value = item;
            break;
          default:
            break;
        }
      });
    }
    option = {
      grid: {
        top: '0',
        bottom: '0',
        backgroundColor: '#fff'
      },
      tooltip: {
        trigger: 'item',
        position: [100, 0]
      },
      series: [
        {
          // name: '任务积压',
          type: 'pie',
          cursor: 'pointer',
          radius: [0, '80%'],
          label: {
            position: 'center',
            formatter: '{c}\n{b|强制关闭}',
            color: '#46545D ',
            fontSize: 20,
            fontWeight: 'bold',
            lineHeight: '28',
            rich: {
              b: {
                fontSize: 12,
                fontWeight: '400',
                color: ' #46545D',
                lineHeight: '16'
              }
            }
          },
          labelLine: {
            show: false
          },
          emphasis: {
            disabled: true
          },
          data: [
            {
              value: count ? count : 0,
              // value: 100,
              name: '强制关闭',
              itemStyle: {
                color: '#fff'
              },
              label: {
                show: true
              }
            }
          ]
        },
        {
          name: '强制关闭',
          type: 'pie',
          cursor: 'pointer',
          radius: ['80%', '100%'],
          labelLine: {
            show: false
          },
          emphasis: {
            disabled: true
          },
          avoidLabelOverlap: false,
          data: [
            {
              value: red_grade.value.counts ? red_grade.value.counts : 0,
              // value: 20,
              name: '红色警告',
              itemStyle: {
                color: '#FF0000'
              }
            },
            {
              value: Yellow_grade.value.counts ? Yellow_grade.value.counts : 0,
              // value: 20,
              name: '黄色警告',
              itemStyle: {
                color: '#FFFF00'
              }
            },
            {
              value: Orange_grade.value.counts ? Orange_grade.value.counts : 0,
              // value: 20,
              name: '橙色警告',
              itemStyle: {
                color: '#ED702D'
              }
            }
          ]
        }
      ]
    };

    option && hard_close.value.setOption(option);
    hard_close.value.on('click', (params) => {
      // unresolverVisible.value = true;
      switch (params.name) {
        case '强制关闭':
          closeVisible.value = true;
          break;
        case '黄色警告':
          close.value = '1';
          eventClose_TaskList('1');
          break;
        case '橙色警告':
          close.value = '2';
          eventClose_TaskList('2');
          break;
        case '红色警告':
          close.value = '3';
          eventClose_TaskList('3');
          break;
        default:
          break;
      }
    });
  };
  // const affect = () => {
  //   if (influence.value != null && influence.value != '' && influence.value != undefined) {
  //     influence.value.dispose();
  //   }
  //   influence.value = proxy.$ECharts.init(document.getElementById('influence'));
  //   let option;
  //   // let { count, eventLevelCount } = data ? data : 0;
  //   // const ary = ref(Number(unclaimed) + Number(processing) + Number(toCmsj) + Number(transferDeal));
  //   // let Yellow_grade = ref('');
  //   // let red_grade = ref('');
  //   // let Orange_grade = ref('');
  //   // if (eventLevelCount) {
  //   //   eventLevelCount.forEach((item) => {
  //   //     switch (item.eventLevel) {
  //   //       case '1':
  //   //         Yellow_grade.value = item;
  //   //         break;
  //   //       case '2':
  //   //         Orange_grade.value = item;
  //   //         break;
  //   //       case '3':
  //   //         red_grade.value = item;
  //   //         break;
  //   //       default:
  //   //         break;
  //   //     }
  //   //   });
  //   // }
  //   option = {
  //     grid: {
  //       top: '0',
  //       bottom: '0',
  //       backgroundColor: '#fff'
  //     },
  //     tooltip: {
  //       trigger: 'item',
  //       position: [100, 0]
  //     },
  //     series: [
  //       {
  //         // name: '任务积压',
  //         type: 'pie',
  //         cursor: 'pointer',
  //         radius: [0, '80%'],
  //         label: {
  //           position: 'center',
  //           formatter: '{c}\n{b|判断有影响}',
  //           color: '#46545D ',
  //           fontSize: 20,
  //           fontWeight: 'bold',
  //           lineHeight: '28',
  //           rich: {
  //             b: {
  //               fontSize: 12,
  //               fontWeight: '400',
  //               color: ' #46545D',
  //               lineHeight: '16'
  //             }
  //           }
  //         },
  //         labelLine: {
  //           show: false
  //         },
  //         emphasis: {
  //           disabled: true
  //         },
  //         data: [
  //           {
  //             // value: count ? count : 0,
  //             value: 100,
  //             name: '判断有影响',
  //             itemStyle: {
  //               color: '#fff'
  //             },
  //             label: {
  //               show: true
  //             }
  //           }
  //         ]
  //       },
  //       {
  //         name: '判断有影响',
  //         type: 'pie',
  //         cursor: 'pointer',
  //         radius: ['80%', '100%'],
  //         labelLine: {
  //           show: false
  //         },
  //         emphasis: {
  //           disabled: true
  //         },
  //         avoidLabelOverlap: false,
  //         data: [
  //           {
  //             // value: red_grade.value.counts ? red_grade.value.counts : 0,
  //             value: 20,
  //             name: '红色警告',
  //             itemStyle: {
  //               color: '#FF0000'
  //             }
  //           },
  //           {
  //             // value: Yellow_grade.value.counts ? Yellow_grade.value.counts : 0,
  //             value: 20,
  //             name: '黄色警告',
  //             itemStyle: {
  //               color: '#FFFF00'
  //             }
  //           },
  //           {
  //             // value: Orange_grade.value.counts ? Orange_grade.value.counts : 0,
  //             value: 20,
  //             name: '橙色警告',
  //             itemStyle: {
  //               color: '#ED702D'
  //             }
  //           }
  //         ]
  //       }
  //     ]
  //   };

  //   option && influence.value.setOption(option);
  //   influence.value.on('click', (params) => {
  //     // unresolverVisible.value = true;
  //     switch (params.name) {
  //       case '强制关闭':
  //         closeVisible.value = true;
  //         break;
  //       case '黄色警告':
  //         close.value = '1';
  //         eventClose_TaskList('1');
  //         break;
  //       case '橙色警告':
  //         close.value = '2';
  //         eventClose_TaskList('2');
  //         break;
  //       case '红色警告':
  //         close.value = '3';
  //         eventClose_TaskList('3');
  //         break;
  //       default:
  //         break;
  //     }
  //   });
  // };
  const the_total_list = (data: User) => {
    if (the_total.value != null && the_total.value != '' && the_total.value != undefined) {
      the_total.value.dispose();
    }
    the_total.value = markRaw(proxy.$ECharts.init(document.getElementById('the_total')));
    const time = reactive([]);
    const dataseries = reactive([]);
    const list = reactive({
      hfCenter: [], // 合肥中心（0）
      yzCenter: [], // 亦庄中心（1）
      ftCenter: [], // 丰台中心（2）
      lfCenter: [], // 廊坊中心（3）
      notCenter: [], // 无所属中心（5)
      networkCount: [], //网络条线
      systemCount: [], //系统条线
      ontCount: [], //应用一线
      twoCount: [], //应用二线
      notCenter_tx: [], //无所属中心
      safeCount: [], //安全条线
      powerCount: [], // 动力条线
      oneDept: [], // 应用一处
      twoDept: [], // 应用二处
      threeDept: [], // 应用三处
      systemOneDept: [], //系统一处
      systemTwoDept: [], //系统二处
      systemBuildDept: [], //资源管理处
      networkOneDept: [], //网络一处
      networkTwoDept: [], //网络二处
      networkResourceDept: [] //资源管理处
    });
    const form = reactive({
      name: '',
      data: []
    });
    switch (groupType.value) {
      case '1':
        dataseries.length = 0;
        data.forEach((item) => {
          (time as any).push(item.time);
          for (const i in item.data) {
            switch (i) {
              case 'hfCount':
                (list.hfCenter as any).push(item.data[i]);
                if (list.hfCenter.length == data.length) {
                  form.data = list.hfCenter.concat();
                  dataseries.push({
                    name: '合肥中心',
                    type: 'line',
                    symbol: 'circle',
                    symbolSize: 8,
                    lineStyle: {
                      width: 1
                    },
                    data: list.hfCenter.concat()
                  });
                  list.hfCenter.length = 0;
                }
                break;
              case 'yzCount':
                (list.yzCenter as any).push(item.data[i]);
                if (list.yzCenter.length == data.length) {
                  form.data = list.yzCenter.concat();
                  dataseries.push({
                    name: '亦庄中心',
                    type: 'line',
                    symbol: 'circle',
                    symbolSize: 8,
                    lineStyle: {
                      width: 1
                    },
                    data: form.data
                  });
                  list.yzCenter.length = 0;
                }
                break;
              case 'ftCount':
                (list.ftCenter as any).push(item.data[i]);
                if (list.ftCenter.length == data.length) {
                  form.data = list.ftCenter.concat();
                  dataseries.push({
                    name: '丰台中心',
                    type: 'line',
                    symbol: 'circle',
                    symbolSize: 8,
                    lineStyle: {
                      width: 1
                    },
                    data: form.data
                  });
                  list.ftCenter.lengt = 0;
                }
                break;
              case 'lfCount':
                (list.lfCenter as any).push(item.data[i]);
                if (list.lfCenter.length == data.length) {
                  form.data = list.lfCenter.concat();
                  dataseries.push({
                    name: '廊坊中心',
                    type: 'line',
                    symbol: 'circle',
                    symbolSize: 8,
                    lineStyle: {
                      width: 1
                    },
                    data: form.data
                  });
                  list.lfCenter.length = 0;
                }
                break;
              case 'notCount':
                (list.notCenter as any).push(item.data[i]);
                if (list.notCenter.length == data.length) {
                  form.data = list.notCenter.concat();
                  dataseries.push({
                    name: '无所属中心',
                    type: 'line',
                    symbol: 'circle',
                    symbolSize: 8,
                    lineStyle: {
                      width: 1
                    },
                    data: form.data
                  });
                  list.notCenter.length = 0;
                }
                break;

              default:
                break;
            }
          }
          // (hfCenter as any).push(item.data.hfCount);
          // (yzCenter as any).push(item.data.yzCount);
          // (ftCenter as any).push(item.data.ftCount);
          // (lfCenter as any).push(item.data.lfCount);
          // (notCenter as any).push(item.data.notCount);
        });
        break;
      case '2':
        dataseries.length = 0;
        data.forEach((item) => {
          (time as any).push(item.time);
          for (const i in item.data) {
            switch (i) {
              case 'networkCount':
                (list.networkCount as any).push(item.data[i]);
                if (list.networkCount.length == data.length) {
                  form.data = list.networkCount.concat();
                  dataseries.push({
                    name: '网络条线',
                    type: 'line',
                    symbol: 'circle',
                    symbolSize: 8,
                    lineStyle: {
                      width: 1
                    },
                    data: list.networkCount.concat()
                  });
                  list.networkCount.length = 0;
                }
                break;
              case 'systemCount':
                (list.systemCount as any).push(item.data[i]);
                if (list.systemCount.length == data.length) {
                  form.data = list.systemCount.concat();
                  dataseries.push({
                    name: '系统条线',
                    type: 'line',
                    symbol: 'circle',
                    symbolSize: 8,
                    lineStyle: {
                      width: 1
                    },
                    data: form.data
                  });
                  list.systemCount.length = 0;
                }
                break;
              case 'ontCount':
                (list.ontCount as any).push(item.data[i]);
                if (list.ontCount.length == data.length) {
                  form.data = list.ontCount.concat();
                  dataseries.push({
                    name: '应用一线',
                    type: 'line',
                    symbol: 'circle',
                    symbolSize: 8,
                    lineStyle: {
                      width: 1
                    },
                    data: form.data
                  });
                  list.ontCount.lengt = 0;
                }
                break;
              case 'twoCount':
                (list.twoCount as any).push(item.data[i]);
                if (list.twoCount.length == data.length) {
                  form.data = list.twoCount.concat();
                  dataseries.push({
                    name: '应用二线',
                    type: 'line',
                    symbol: 'circle',
                    symbolSize: 8,
                    lineStyle: {
                      width: 1
                    },
                    data: form.data
                  });
                  list.twoCount.length = 0;
                }
                break;
              case 'notCenter':
                (list.notCenter_tx as any).push(item.data[i]);
                if (list.notCenter_tx.length == data.length) {
                  form.data = list.notCenter_tx.concat();
                  dataseries.push({
                    name: '无所属中心',
                    type: 'line',
                    symbol: 'circle',
                    symbolSize: 8,
                    lineStyle: {
                      width: 1
                    },
                    data: form.data
                  });
                  list.notCenter_tx.length = 0;
                }
                break;
              case 'safeCount':
                (list.safeCount as any).push(item.data[i]);
                if (list.safeCount.length == data.length) {
                  form.data = list.safeCount.concat();
                  dataseries.push({
                    name: '安全条线',
                    type: 'line',
                    symbol: 'circle',
                    symbolSize: 8,
                    lineStyle: {
                      width: 1
                    },
                    data: form.data
                  });
                  list.safeCount.length = 0;
                }
                break;
              case 'powerCount':
                (list.powerCount as any).push(item.data[i]);
                if (list.powerCount.length == data.length) {
                  form.data = list.powerCount.concat();
                  dataseries.push({
                    name: '动力条线',
                    type: 'line',
                    symbol: 'circle',
                    symbolSize: 8,
                    lineStyle: {
                      width: 1
                    },
                    data: form.data
                  });
                  list.powerCount.length = 0;
                }
                break;
              default:
                break;
            }
          }
        });
        break;
      case '3':
        dataseries.length = 0;
        data.forEach((item) => {
          (time as any).push(item.time);
          for (const i in item.data) {
            switch (i) {
              case 'oneDept':
                (list.oneDept as any).push(item.data[i]);
                if (list.oneDept.length == data.length) {
                  form.data = list.oneDept.concat();
                  dataseries.push({
                    name: '应用一处',
                    type: 'line',
                    symbol: 'circle',
                    symbolSize: 8,
                    lineStyle: {
                      width: 1
                    },
                    data: form.data
                  });
                  list.oneDept.length = 0;
                }
                break;
              case 'twoDept':
                (list.twoDept as any).push(item.data[i]);
                if (list.twoDept.length == data.length) {
                  form.data = list.twoDept.concat();
                  dataseries.push({
                    name: '应用二处',
                    type: 'line',
                    symbol: 'circle',
                    symbolSize: 8,
                    lineStyle: {
                      width: 1
                    },
                    data: form.data
                  });
                  list.twoDept.length = 0;
                }
                break;
              case 'threeDept':
                (list.threeDept as any).push(item.data[i]);
                if (list.threeDept.length == data.length) {
                  form.data = list.threeDept.concat();
                  dataseries.push({
                    name: '应用三处',
                    type: 'line',
                    symbol: 'circle',
                    symbolSize: 8,
                    lineStyle: {
                      width: 1
                    },
                    data: form.data
                  });
                  list.threeDept.length = 0;
                }
                break;
              default:
                break;
            }
          }
        });
        break;
      case '4':
        dataseries.length = 0;
        data.forEach((item) => {
          (time as any).push(item.time);
          for (const i in item.data) {
            switch (i) {
              case 'systemOneDept':
                (list.systemOneDept as any).push(item.data[i]);
                if (list.systemOneDept.length == data.length) {
                  form.data = list.systemOneDept.concat();
                  dataseries.push({
                    name: '系统一处',
                    type: 'line',
                    symbol: 'circle',
                    symbolSize: 8,
                    lineStyle: {
                      width: 1
                    },
                    data: form.data
                  });
                  list.systemOneDept.length = 0;
                }
                break;
              case 'systemTwoDept':
                (list.systemTwoDept as any).push(item.data[i]);
                if (list.systemTwoDept.length == data.length) {
                  form.data = list.systemTwoDept.concat();
                  dataseries.push({
                    name: '系统二处',
                    type: 'line',
                    symbol: 'circle',
                    symbolSize: 8,
                    lineStyle: {
                      width: 1
                    },
                    data: form.data
                  });
                  list.systemTwoDept.length = 0;
                }
                break;
              case 'systemBuildDept':
                (list.systemBuildDept as any).push(item.data[i]);
                if (list.systemBuildDept.length == data.length) {
                  form.data = list.systemBuildDept.concat();
                  dataseries.push({
                    name: '资源管理处',
                    type: 'line',
                    symbol: 'circle',
                    symbolSize: 8,
                    lineStyle: {
                      width: 1
                    },
                    data: form.data
                  });
                  list.systemBuildDept.length = 0;
                }
                break;
              default:
                break;
            }
          }
        });
        break;
      case '5':
        dataseries.length = 0;
        data.forEach((item) => {
          (time as any).push(item.time);
          for (const i in item.data) {
            switch (i) {
              case 'networkOneDept':
                (list.networkOneDept as any).push(item.data[i]);
                if (list.networkOneDept.length == data.length) {
                  form.data = list.networkOneDept.concat();
                  dataseries.push({
                    name: '网络一处',
                    type: 'line',
                    symbol: 'circle',
                    symbolSize: 8,
                    lineStyle: {
                      width: 1
                    },
                    data: form.data
                  });
                  list.networkOneDept.length = 0;
                }
                break;
              case 'networkTwoDept':
                (list.networkTwoDept as any).push(item.data[i]);
                if (list.networkTwoDept.length == data.length) {
                  form.data = list.networkTwoDept.concat();
                  dataseries.push({
                    name: '网络二处',
                    type: 'line',
                    symbol: 'circle',
                    symbolSize: 8,
                    lineStyle: {
                      width: 1
                    },
                    data: form.data
                  });
                  list.networkTwoDept.length = 0;
                }
                break;
              case 'networkResourceDept':
                (list.networkResourceDept as any).push(item.data[i]);
                if (list.networkResourceDept.length == data.length) {
                  form.data = list.networkResourceDept.concat();
                  dataseries.push({
                    name: '资源管理处',
                    type: 'line',
                    symbol: 'circle',
                    symbolSize: 8,
                    lineStyle: {
                      width: 1
                    },
                    data: form.data
                  });
                  list.networkResourceDept.length = 0;
                }
                break;
              default:
                break;
            }
          }
        });
        break;
      default:
        break;
    }
    let option;
    option = {
      tooltip: {
        trigger: 'axis',
        confine: true,
        textStyle: {
          fontSize: 10
        }
      },
      legend: {
        icon: 'circle',
        right: '0%',
        orient: 'vertical',
        height: 'auto',
        // top: '10%',
        bottom: '0',
        itemGap: 7,
        selectedMode: false,
        itemWidth: 6,
        textStyle: {
          color: '#787C86',
          fontSize: '12',
          fontWeight: '400'
        }
      },
      grid: {
        left: '15',
        right: '23%',
        bottom: '0',
        top: '10%',
        containLabel: true
      },
      // dataset: {
      //   source: data
      // },
      xAxis: {
        type: 'category',
        boundaryGap: false,
        data: time,
        triggerEvent: true
        // data: NearlyEight_time
      },
      yAxis: {
        type: 'value'
      },
      series: dataseries
    };
    option && the_total.value.setOption(option);
    // the_total.value.on('click', (params) => {
    //   console.log(params);
    // });
  };
  const hotSpot_list = (data: Number) => {
    if (
      Hotspot_systemDiagram.value != null &&
      Hotspot_systemDiagram.value != '' &&
      Hotspot_systemDiagram.value != undefined
    ) {
      Hotspot_systemDiagram.value.dispose();
    }
    Hotspot_systemDiagram.value = markRaw(
      proxy.$ECharts.init(document.getElementById('Hotspot_systemDiagram'))
    );
    const namelist = reactive([]);
    const dataset = reactive([]);
    data.forEach((item) => {
      (namelist as any).push(item.sysName);
      (dataset as any).push({ value: item.sysCount, id: item.sysId, name: item.sysName });
    });
    let option;
    option = {
      legend: {},
      tooltip: {
        textStyle: {
          fontSize: 10
        }
      },
      grid: {
        left: '0%',
        right: '2%',
        bottom: '0',
        top: '10%',
        containLabel: true
      },
      xAxis: {
        type: 'category',
        data: namelist,
        axisLabel: {
          interval: 0,
          formatter: function (params) {
            const newParamsName = ref('');
            const paramsNameNumber = ref(params.length); // 一共几个字
            const provideNumber = ref(2); //一行显示几个字
            const rowNumber = Math.ceil(paramsNameNumber.value / provideNumber.value); //能显示几行
            if (paramsNameNumber.value > provideNumber.value) {
              //两行展示
              for (let p = 0; p < 2; p++) {
                let tempStr = '';
                let start = p * provideNumber.value;
                let end = start + provideNumber.value;
                if (p == rowNumber - 1) {
                  tempStr = params.substring(start, paramsNameNumber);
                } else {
                  tempStr = params.substring(start, end) + '\n';
                }
                newParamsName.value += tempStr;
              }
              //换行时....
              return (newParamsName.value =
                newParamsName.value.substring(0, newParamsName.value.length - 1) +
                '\n' +
                '...' +
                ' ');
            } else {
              return (newParamsName.value = params);
            }
          }
        }
      },
      // dataset: {
      //   source: data
      // },
      yAxis: {},
      series: [
        {
          data: dataset,
          type: 'bar',
          itemStyle: {
            color: new proxy.$ECharts.graphic.LinearGradient(0, 0, 0, 1, [
              { offset: 0, color: '#83bff6' },
              { offset: 0.5, color: '#188df0' },
              { offset: 1, color: '#188df0' }
            ])
          }
        }
      ]
    };
    option && Hotspot_systemDiagram.value.setOption(option);
    // Hotspot_systemDiagram.value.on('click', (params) => {
    //   console.log(params);
    //   router.push({
    //     name: 'graph_monitor',
    //     params: {
    //       type: '2',
    //       eventLevel: hot_radio.value,
    //       orgName: params.name, //系统名称
    //       orgId: params.data.id,
    //       dataType: hot_Date_latitude.value,
    //       sysType: dataType.value
    //     }
    //   });
    // });
  };
  const Monitor_Detail = (num, lever, orgName) => {
    router.push({
      name: 'run_monitor',
      params: { 
        type: num,
        eventLevel: lever?lever:-1,
        orgName: orgName?orgName:-1,
        typeCount: props.type?props.type:-1
        }
    });
  };
  const Trend_changeLevel = () => {
    compareCount_list();
  };
  const date_changeLevel = () => {
    compareCount_list();
  };
  const hot_date_changeLevel = () => {
    Hotspot_sys();
  };
  const hot_changeLevel = () => {
    Hotspot_sys();
  };
  const handleNodeClick = (data: Node) => {
    if (data.value) {
      groupType.value = data.value;
      compareCount_list();
    }
  };
  const handleDateClick = (data: Node) => {
    dataType.value = data.value;
    Hotspot_sys();
  };
  watch(props, () => {
    getEventCount();
    eventTake_LevelCount();
    eventTake_DeptCount('');
    eventUpdate_LevelCount();
    eventUpdate_DeptCount('');
    eventStock_LevelCount();
    eventStock_TaskList('');
    eventClose_LevelCount();
    eventClose_TaskList('');
    NotSolveLevel();
    SolveTaskList('');
    compareCount_list();
    Hotspot_sys();
  });
  onBeforeUnmount(() => {
    if (the_total.value) {
      the_total.value.dispose();
    }
    if (Hotspot_systemDiagram.value) {
      Hotspot_systemDiagram.value.dispose();
    }
  });
</script>

<style scoped lang="less">
  .Monitor {
    .content_top {
      display: flex;
      width: 100%;
      justify-content: space-between;
      align-items: center;
      height: 120px;
      .abnormal {
        width: 130px;
        height: 100%;
        .situation {
          height: 36px;
          width: 100%;
          display: flex;
          justify-content: space-between;
          align-items: center;
          border-radius: 6px;
          padding: 0 10px;
          box-sizing: border-box;
          cursor: pointer;
          .typeNum {
            text-align: center;
            font-size: 14px;
            font-weight: bold;
          }
          .type {
            font-size: 14px;
            font-weight: 400;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
          }
          &.completed {
            margin-bottom: 4px;
          }
        }
      }
      .pir_swiper {
        width: calc(100% - 140px);
        display: flex;
        justify-content: space-around;
        .take_timeout,
        .Update_timeout {
          width: 100%;
          height: 120px;
          display: flex;
          justify-content: center;
          align-items: center;
          // padding: 0 10px;
          #timeoutNot_takenOver,
          #timeoutNot_updated,
          #task_Backlog,
          #shut,
          #influence {
            width: 100px;
            height: 100px;
            border-radius: 50%;
            margin-right: 10px;
          }
          :deep(ul) {
            list-style: none;
            height: calc(100% - 20px);
            width: calc(100% - 110px);
            padding: 0;
            margin: 0;
            overflow: auto;
            li {
              display: flex;
              justify-content: space-between;
              cursor: pointer;
              .list_title {
                font-size: 12px;
                font-weight: 400;
                color: #46545d;
                text-align: left;
                overflow: hidden;
                white-space: nowrap;
                text-overflow: ellipsis;
              }
              .list_num {
                display: inline-block;
                width: 35%;
                font-size: 12px;
                font-weight: bold;
                color: #46545d;
                text-align: left;
              }
            }
          }
        }
        .swiper {
          height: 120px;
          .swiper-wrapper {
            .swiper-slide {
              .take_timeout,
              .Update_timeout {
                width: 100%;
                height: 100%;
                display: flex;
                justify-content: center;
                // padding: 0 10px;
                #timeoutNot_takenOver,
                #timeoutNot_updated,
                #task_Backlog,
                #unsolved,
                #influence {
                  width: 100px;
                  height: 100px;
                  border-radius: 50%;
                  margin-right: 10px;
                }
                .el-scrollbar {
                  height: calc(100% - 20px);
                  :deep(ul) {
                    list-style: none;
                    height: 100%;
                    width: 180px;
                    padding: 0;
                    margin: 0;
                    overflow: auto;
                    li {
                      display: flex;
                      justify-content: space-between;
                      cursor: pointer;
                      .list_title {
                        font-size: 12px;
                        font-weight: 400;
                        color: #46545d;
                        text-align: left;
                      }
                      .list_num {
                        font-size: 12px;
                        font-weight: bold;
                        color: #46545d;
                        text-align: left;
                      }
                    }
                  }
                }

                // ::-webkit-scrollbar {
                //   width: 5px;
                //   // background-color: #f5f5f5;
                //   // border-radius: 2px;
                // }
                // ::-webkit-scrollbar-thumb {
                //   // background-color: rgba(64, 158, 255, 0.9);
                // }
              }
            }
          }
          :deep(.swiper-pagination) {
            bottom: 0px;
          }
        }
      }
    }
    .content_bottom {
      display: flex;
      justify-content: space-between;
      height: calc(100% - 120px);
      // padding-top: 10px;
      .Trend_block,
      .system_block {
        width: 49.5%;
        background: #fff;
        .title {
          font-size: 14px;
          font-weight: bold;
          color: #46545d;
          margin: 0;
          padding: 0;
          line-height: 40px;
        }
        .text-sm {
          height: 30px;
          display: flex;
          justify-content: space-between;
          padding-right: 30px;
          .el-radio-group {
            .el-radio {
              margin-right: 10px;
              :deep(.el-radio__label) {
                font-size: 14px;
                font-weight: 400;
                color: #454c5c;
                opacity: 0.8;
              }
            }
            :deep(.is-checked) {
              .el-radio__label {
                font-size: 14px;
                font-weight: 400;
                color: #454c5c;
                opacity: 0.8;
              }
            }
          }
          .el-select {
            width: 140px;
          }
        }
        #the_total,
        #Hotspot_systemDiagram {
          width: 100%;
          height: calc(100% - 70px);
          // height: 100%;
        }
        /* .Date_latitude {
          height: 30px;
          .el-radio {
            margin-right: 10px;
            :deep(.el-radio__label) {
              font-size: 14px;
              font-weight: 400;
              color: #454c5c;
              opacity: 0.8;
            }
          }
          :deep(.is-checked) {
            .el-radio__label {
              font-size: 14px;
              font-weight: 400;
              color: #454c5c;
              opacity: 0.8;
            }
          }
        } */
      }
    }
    :deep(.el-dialog__header) {
      background: #eaeef4;
      margin-right: 0;
      // padding: 40px;
    }
    :deep(.el-dialog__body) {
      padding-right: 40px;
      padding-left: 40px;
    }
  }
</style>
